<template>
  <div class="app-page">
    <aside-tree
      title="字典项"
      :mouse-button="false"
      :tree-data="treeData"
      :loading="$loadingPlugin.getTreeData"
      @currentChange="currentChange"
      @refresh="getTreeData"
    />
    <div class="content">
      <div style="margin-bottom: 10px;">
        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
      </div>
      <lb-table
        ref="lbTable"
        v-loading="$loadingPlugin.fetchData"
        v-el-height-adaptive-table="{bottomOffset:10}"
        border
        stripe
        highlight-current-row
        element-loading-text="加载中"
        :column="tableData.column"
        :data="tableData.data"
        :pagination="false"
        :immediate-fetch="false"
        @fetch="fetchData"
      />
    </div>
    <edit-preset ref="edit" />
  </div>
</template>

<script>
  import AsideTree from '@/views/components/OrgTree'
  import { presetDicQueryList, userPresetDic, queryMap } from '@/api'
  import getTreeData from '@/utils/jsonTree'
  import EditPreset from './components/EditPreset'

  export default {
    name: 'preset-tab',
    components: {
      AsideTree, EditPreset
    },
    data() {
      return {
        isFirst: true,
        treeData: [],
        userTypeMap: [],
        dicItem: null,
        checked: false,
        query: {
          keyFun: ''
        },
        tableData: {
          total: 0,
          column: [
            {
              prop: 'keyVal',
              label: '编号'
            },
            {
              prop: 'keyName',
              label: '名称'
            },
            {
              prop: 'keyVal',
              label: '优先级'
            },
            {
              prop: 'keyStatus',
              label: '状态',
              render: (h, { row }) => {
                if (row.keyStatus === 2) {
                  return <span style='color: #00bfff;'>启用</span>
                } else if (row.keyStatus === 1) {
                  return <span style='color: #F24024;'>禁用</span>
                } else {
                  return ''
                }
              }
            },
            {
              label: '操作',
              align: 'center',
              fixed: 'right',
              width: 120,
              render: (h, { row, $index }) => {
                return (
                  <div>
                    <el-link type='primary' size='mini' onClick={() => this.update(row, $index)}>
                      编辑
                    </el-link>
                    <el-link size='mini' type='danger' onClick={() => this.del(row, $index)}>
                      启用/禁用
                    </el-link>
                  </div>
                )
              }
            }
          ],
          data: []
        }
      }
    },
    async created() {
      await Promise.all([this.getTreeData()])
    },
    methods: {
      async getTreeData() {
        const res = await queryMap({ enumName: 'CommonKeysForProtect' })
        const data = res.data.map(item => ({
          label: item.desc,
          parentId: 0,
          ...item
        }))
        this.treeData = getTreeData(data, 'parentId', 'value')
      },
      async fetchData() {
        const query = {
          keyFun: this.dicItem ? this.dicItem.value : ''
        }
        const res = await presetDicQueryList(query)
        this.tableData.data = res.data
      },
      currentChange(current) {
        if (!this.isFirst) this.dicItem = current
        this.$refs.lbTable.fetch({ currentPage: 1 })
        this.isFirst = false
      },
      search() {
        this.$refs.lbTable.fetch({ currentPage: 1 })
      },
      async update(row) {
        await this.$refs.edit.open(row)
        this.$refs.lbTable.fetch()
      },
      del(row, index) {
        const title = row.keyStatus === 2 ? '禁用' : '启用'
        this.$confirm(`确定要${title}该字典？`, '提示', {
          type: 'warning'
        }).then(() => {
          const loading = this.$message({
            message: 'title',
            duration: 0,
            iconClass: 'el-icon-loading'
          })
          userPresetDic(row).then(() => {
            this.$refs.lbTable.fetch({ currentPage: 1 })
            this.$notify({
              title: '提示',
              message: `${title}成功`,
              type: 'success',
              duration: 2000
            })
          }).finally(() => {
            loading.close()
          })
        })
      },
      // 点击最后登陆时间打开历史登录记录
      async openLoginHistory(row) {
        await this.$refs.loginHistory.open(row)
      }
    }
  }
</script>

<style lang="scss" scoped>
.app-page {
  display: flex;
  padding: 0;
  .content {
    width: 0;
    padding: 10px 10px 0 10px;
    flex: 1;
  }
}
</style>
